<!-- 木材专题 -->
<template>
  <div class="woodIndex-wrapper">
    <!-- <button class="backBtn" @click="$router.push({path: '/dataanalysis/generalviewmanage/myOverview'})">
      <img src="@/assets/images/LED/dataCenterLED/tuoyuan.png">
      返回数据分析
    </button> -->
    <div class="content">
      <div class="content-top">
        <!-- 左上大图部分 -->
        <div class="left-map">
          <leftmap />
        </div>
        <!-- 右上十大企业排名部分 -->
        <div class="ten-enterprise">
          <tenenterprise />
        </div>
      </div>
      <div class="content-bottom">
        <!-- 木制品类别产值占比 -->
        <div class="product minmap" id="product">
          <product />
        </div>
        <!-- 木制品产值趋势 -->
        <div class="outputs minmap">
          <outputs />
        </div>
        <!-- 热力图 -->
        <div class="heat-map minmap">
          <heatmap />
        </div>
        <!-- 出口变化 -->
        <div class="export-change minmap">
          <exportchange />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftmap from "@/wood/components/leftmap.vue";
import tenenterprise from "@/wood/components/tenenterprise.vue";
import product from "@/wood/components/product.vue";
import outputs from "@/wood/components/outputs.vue";
import heatmap from "@/wood/components/heatmap.vue";
import exportchange from "@/wood/components/exportchange.vue";


export default {
  name: "Wood",
  components: {
    leftmap,
    tenenterprise,
    product,
    outputs,
    heatmap,
    exportchange,
  },
  data() {
    return {};
  },
  created() { },
  mounted() {
    document.title = "木材专题-数据中台";
  },
  computed: {},
  methods: {},
};
</script>

<style scoped>
.woodIndex-wrapper {
  /* width: 100%; */
  overflow: auto;
  height: 100vh;
  color: #fff;
  background: url("~@/wood/images/AE木材top.png") no-repeat center top,
    #0f1039;
  background-size: auto 7%, auto 100%;
  position: relative;
  padding: 0px 24px;

}

.woodIndex-wrapper .content {
  /* // min-width: 1800px; */
  position: absolute;
  top: 7%;
  width: 96.8%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

}

.woodIndex-wrapper .content .content-top {
  display: flex;
  padding-bottom: 0.8%;
}

.woodIndex-wrapper .content .content-top .left-map {
  width: 57%;
}

.woodIndex-wrapper .content .content-top .ten-enterprise {
  position: absolute;
  right: 0;
  width: 43%;
  padding-left: 0.6%;
}

.woodIndex-wrapper .content  .content-bottom {
  display: flex;
}

.woodIndex-wrapper .content.content-bottom #product {
  padding-left: 0;
}

.woodIndex-wrapper .content .content-bottom .minmap {
  padding-left: 1%;
  width: 25%;
}
</style>
